bubbleのアプリに外部データベースを連携してみる[データ取得]

以前の記事でデータをBubbleのデータベースに保存したり、そのデータを取得したりしました。

Bubble内にデータを保存できない要件がある、既存のDBからの移行が大変などといったことがあると、 もともと使っているデータベースをそのままBubbleでも使用できるようにしたいことも出てきます。

こういう場合、BubbleではPluginのSQL Database Connectorという公式のものを使って要件を満たせる可能性があります。

このプラグインはデータベースに接続し、Bubble内からSQLクエリを実行できるようにするものです。

PostgreSQL, MySQL, Microsoft SQLへの接続がサポートされています。

※ mongoDBやDynamoDBといったDBはサポートされていません

プラグインのインストール

Bubbleアプリの管理画面のPluginsをクリックし、Pluginの検索画面を起動した後、

検索ボックスにSQLと入力すればSQL Database Connectorが表示されるので、インストールボタンを押してアプリにインストールしましょう。

コネクションの作成

アプリのPlugin設定ページでConnection stringを指定して作成できます。

Connection name, Database type, Connection string　を入力し、Test the connectionボタンを押して接続が成功するか確認します。

成功すると、Database connected と表示されます。

Queryの作成

取得したいデータ、登録・編集したいデータに対応するクエリを作成するとBubbleアプリ内で使用できます。

• Name
  • クエリの名前(actionやdataで選択します)
• Connection
  • 作成したコネクションから選択
• Use as
  • action、data、その両方で使用するか選択
  • dataは、外部APIとして利用します
• Query
  • クエリを書きましょう
• Parameters
  • クエリに使うパラメーターを設定します
  • 
  • 例) select * from shop1.items where @category_id=$1 limit 10

クエリを作成したら、initialize this query を押した後、Saveします。

これでアプリ内で使用できるようになります。

データを表示させてみる

selectの結果はリストで返ってくるので、Repeating Groupを使って取得したデータを表示させてみます。

select * from shop1.items limit 30

このデータを表示させるならば、

Type of contentに作成したクエリのNameを選択し、

Data source でGet data from an external APIを選択します。

API Providerに作成したクエリが表示されているはずなので、取得したいデータのクエリを選びましょう(今回はall_items)

これでデータを表示できる準備ができましたので、あとはてきすとなどを配置して表示させるだけです。

Current cell's クエリ名 フィールド名 をセットするとRepeating Groupで読み込んだデータを使うことができます。

例えば Current cell's all_items's Name などです。

Previewで確認できますので、様々なクエリで試してみてください。

最後に

外部のデータベースにあるデータをBubbleアプリで使用できるようにPluginをインストールして設定してみました。

今回はselectで表示させてみただけなのですが、 SQL Database Connectorは選択したデータベースで扱えるクエリを書けそうなので、 insertやupdate,deleteもできるかと思います。

別記事にてworkflowを使ったデータの追加や更新は試してみようと思います